<!DOCTYPE html>
<html lang="cn">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="keywords" content="" />
        <title>注册页面</title>

        <!-- ========== Css Files ========== -->
        <link href="../static/css/root.css" rel="stylesheet">

        <style type="text/css">
            body{background: #F5F5F5;}

            .strengthLv1 {
                background-color: red;
                height: 6px;
                /*width: 40px;*/
                width: 33%;
                border: 1px solid #ccc;
                padding: 2px;
            }

            .strengthLv2 {
                background-color: blue;
                height: 6px;
                /*width: 80px;*/
                width: 66%;
                border: 1px solid #ccc;
                padding: 2px;
            }

            .strengthLv3 {
                background-color: green;
                height: 6px;
                /*width: 120px;*/
                width: 99%;
                border: 1px solid #ccc;
                padding: 2px;
            }
        </style>

    </head>
  <body>

    <div class="login-form">

        <form method="post" id="formSubmit">

            <div class="top">
                <h1>注册</h1>
                <h4>欢迎注册并使用!</h4>
            </div>

            <div class="form-area">
                
                <div class="group">
                    <input type="text" class="form-control" placeholder="姓名（必填）" id="stuName">
                    <i class="fa fa-user"></i>
                </div>

                <div class="group">
                    <input type="text" class="form-control" placeholder="学号（必填）" id="stuID">
                    <i class="fa fa-university"></i>
                </div>

                <div class="group">
                    <input type="text" class="form-control" oninput="loingName()" placeholder="手机号（必填）" id="rgLoginname">
                    <i class="fa fa-phone"></i>
                </div>

                <div class="group">
                    <input type="password" class="form-control" oninput="password()" placeholder="密码（必填）" name="rgPassword" id="password1">
                    <i class="fa fa-key"></i>
                    <div class="pass_wrap">
                        <em>密码强度：</em>
                        <em id="strength"></em>
                        <div id="strengthLevel" class="strengthLv0"></div>
                    </div>
                </div>

                <div class="group">
                    <input type="password" class="form-control" placeholder="再次输入密码" id="password2">
                    <i class="fa fa-key"></i>
                </div>

                <div class="group">

                    <label>性别：</label>

                    <div class="radio radio-info radio-inline">
                        <input type="radio" id="inlineRadio1" value="1" name="radioSex" checked>
                        <label for="inlineRadio1"> 男 </label>
                    </div>

                    <div class="radio radio-inline  ">
                        <input type="radio" id="inlineRadio2" value="0" name="radioSex">
                        <label for="inlineRadio2"> 女 </label>
                    </div>
                    
                </div>

                <button type="button" class="btn btn-default btn-block" onclick="rgOnclick()">注册</button>
            </div>
        </form>

        <div class="footer-links row">
            <div class="col-xs-6"><a href="#" onclick="turnToLogin()"><i class="fa fa-sign-in"></i> 登录</a></div>
        </div>

    </div>


<!-- ================================================
jQuery Library
================================================ -->
<script type="text/javascript" src="../static/js/jquery.min.js"></script>

<!-- ================================================
Bootstrap Core JavaScript File
================================================ -->
<script src="../static/js/bootstrap/bootstrap.min.js"></script>

<!-- ================================================
Plugin.js - Some Specific JS codes for Plugin Settings
================================================ -->
<script type="text/javascript" src="../static/js/plugins.js"></script>

<!-- ================================================
Moment.js
================================================ -->
<script type="text/javascript" src="../static/js/moment/moment.min.js"></script>

<!-- ================================================
Bootstrap Date Range Picker
================================================ -->
<script type="text/javascript" src="../static/js/date-range-picker/daterangepicker.js"></script>

<!-- ================================================
Sweet Alert
================================================ -->
<script src="../static/js/sweet-alert/sweet-alert.min.js"></script>

<!-- ================================================
Modern Alert
================================================ -->
<script src="../static/js/Modern-alert/main.js"></script>

<script type="text/javascript">
    function loingName() {
        var loginName = document.getElementById("rgLoginname").value;
        var reg = new RegExp(/^1[34578]\d{9}$/);
        if (!reg.test(loginName)) {
            document.getElementById("rgLoginname").style.border = "1px solid red";
        } else {
            document.getElementById("rgLoginname").style.border = "";
        }
    }
    
    function turnToLogin() {
        window.location.href="http://fanggx.xyz"
    }
    
    function password() {
        var psd = document.getElementById("password1");
        var strength = document.getElementById("strength");
        var strengthLevel = document.getElementById("strengthLevel");
        var arr = ["", "低", "中", "高"];
        psd.onkeyup = function () {
          var level = 0;
          if (/[a-z]/.test(this.value)) {
            level++;
          }
          if (/[0-9]/.test(this.value)) {
            level++;
          }
          if (/[^a-z0-9]/.test(this.value)) {
            level++;
          }
          strength.innerHTML = arr[level];
          strengthLevel.className = "strengthLv" + level;
        };
    }

    async function rgOnclick(){
        var loginName = document.getElementById("rgLoginname").value;
        var reg = new RegExp(/^1[34578]\d{9}$/);
        
        const stuName = document.querySelector('#stuName').value // 获取姓名
        const stuID = document.querySelector('#stuID').value // 获取学号
        const stuPhone = document.querySelector('#rgLoginname').value // 获取用户名
        const password_1 = document.querySelector('#password1').value // 获取密码_1
        const password_2 = document.querySelector('#password2').value // 获取密码_2
        const userSex = $('input:radio[name="radioSex"]:checked').val()  // 获取性别

        if (stuName == '') {
            return swal('注册失败！', '姓名输入为空！', 'error')
        } else if (stuID == '') {
            return swal('注册失败！', '学号输入为空！', 'error')
        }
        
        if (!reg.test(loginName)) {
            return swal('注册失败！', '手机号输入格式错误！', 'error')
        }

        if (password_1 != password_2) {
            return swal('注册失败！', '两次密码输入不一致！', 'error')
        } else if (password_1 == '') {
            return swal('注册失败！', '密码输入为空！', 'error')
        } else {
            const res = await fetch('/register/register', {
                method: 'POST',
                body: JSON.stringify({ stuName, stuID, stuPhone, password_1, userSex }),
                headers: {
                    'Content-Type': 'application/json'
                }
            });
            const json = await res.json();
            const { error, msg, content } = json;
            console.log(json)

            if (error){
                return swal(error, content, 'error')
            } else if (msg) {
                return swal({ title: msg, text: content, type: 'success' }, function() {
                    window.location.href="http://fanggx.xyz";
                })
            }
        }
    };
</script>

</body>
</html>